<template>
    <div>
        <!-- tab切换 -->
        <div>
            <van-tabs v-model="active" sticky animated @change="changeTabs">
                <van-tab title="可用优惠券"></van-tab>
                <van-tab title="已过期优惠券"></van-tab>
            </van-tabs>
        </div>
        <div style="margin:10px 0 0 0; padding:0 10px;">
            <van-col span="24"  v-for="card in dicountCradList" :key="card.index">
                <discount-card 
                :cardValue="card.cardValue"
                :vardValueDesc="card.vardValueDesc"
                :unitDesc="card.unitDesc"
                :condition="card.condition"
                :name="card.name"
                :description="card.description"
                :startAt="card.startAt"
                :endAt="card.endAt"
                @change="onChange"
                @exchange="onExchange"
                ></discount-card>
            </van-col>
        </div>
    </div>
</template>

<script>
import discountCard from './../../components/discountCard';
const coupon = {
  available: 1,
  condition: '可用于购买本店铺所有家居清洗类商品，请尽快使用',
  reason: '',
  value: 5000,
  name: '新年优惠券',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '50',
  unitDesc: '元'
};
export default{
    name: 'discountCardPage',
    data() {
        return {
            name: 'diacountCard',
            chosenCoupon: -1,
            coupons: [coupon],
            disabledCoupons: [coupon],

            active: 0,

            dicountCradList:[
                {
                    cardValue: 5000, // 优惠券值，以分为单位
                    vardValueDesc: 50, // 实际显示值
                    unitDesc: '元', // 优惠券单位
                    condition: '无限制条件', // 使用条件
                    name: '新年优惠券', // 优惠券名称
                    description: '优惠券使用描述信息', // 优惠券使用描述信息
                    startAt: '2020-01-01', // 可用开始时间
                    endAt: '2020-12-12', // 可用结束时间
                },
                {
                    cardValue: 1000, // 优惠券值，以分为单位
                    vardValueDesc: 10, // 实际显示值
                    unitDesc: '元', // 优惠券单位
                    condition: '满两百元可用', // 使用条件
                    name: '全年共享优惠券', // 优惠券名称
                    description: '可用于购买本店铺所有家居清洗类商品，请尽快使用', // 优惠券使用描述信息
                    startAt: '2020-01-01', // 可用开始时间
                    endAt: '2020-12-12', // 可用结束时间
                }
            ]
        }
    },
    methods: {
        onChange(index) {
            this.showList = false;
            this.chosenCoupon = index;
        },
        onExchange(code) {
            this.coupons.push(coupon);
        },
        // 切换tab
        changeTabs() {
            console.log(this.active)
            // 重新请求获取优惠券列表数据--参考order/list.vue写法
        }
    },
    components: { discountCard }
}
</script>